<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棋牌游戏桌面</title>
    <style>
        /* 整体页面样式 */
        body {
            background-color: #006600;
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* 游戏桌面容器 */
       .game-board {
            background-image: url('game-board-bg.jpg');
            background-size: cover;
            width: 800px;
            height: 600px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* 玩家区域 */
       .player-area {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100px;
            margin-left: 0;/** 居左对齐 **/
        }

       .player-hand {
            display: flex;
            align-items: center;
            position: relative; /* 父元素需要是相对定位 */
            margin-left: 0;/** 居左对齐 **/
        }

       .card {
            width: 80px;
            height: 120px;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 5px;
            margin: 0 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
            /*position: absolute; !* 子元素绝对定位 *!
            top: 20px;          !* 相对于父元素的定位 *!
            left: 100px;         !* 相对于父元素的定位 *!*/
        }
        .selectCard {
            width: 80px;
            height: 130px;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 5px;
            margin: 0 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 80px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        }

        /* 牌堆区域 */
       .deck-area {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            position: relative; /* 父元素需要是相对定位 */
        }

       .deck {
            width: 40px;
            height: 60px;
            background-color: #ccc;
            border: 1px solid #000;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        }

        /* 操作按钮区域 */
       .action-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            margin-bottom: 20px;
        }

       .button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 18px;
            margin: 0 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="game-board">

        <div class="deck-area">
            <!--<div class="deck">牌堆</div>-->
        </div>

        <div class="player-area">
            <div class="player-hand">
                <!--<div class="card">A</div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>-->
            </div>
        </div>
        <div class="action-buttons">
            <button class="button">出牌</button>
            <button class="button">准备</button>
            <button class="button">要不起</button>
        </div>
    </div>
    <script src="js/button.js"></script>
    <script>
        // 这里可以添加游戏逻辑的JavaScript代码，比如出牌、摸牌的交互逻辑
        const playCardButton = document.querySelector('.button:nth-child(1)');//出牌按钮
        const planCardButton = document.querySelector('.button:nth-child(2)');//准备按钮
        const skipCardButton = document.querySelector('.button:nth-child(3)');//要不起按钮--跑得快，自动要不起

        const playerHand = document.querySelector('.player-hand');//显示牌的区域
        //const deck = document.querySelector('.deck');//牌堆
        const deckArea = document.querySelector('.deck-area');//牌堆区域--已经打的牌

        playCardButton.addEventListener('click', function () {
            if (playerHand.childNodes.length > 0) {
                //console.info("大小："+playerHand.childNodes.length);
                let removeArray = [];
                for(let i=0; i<playerHand.childNodes.length; i++){
                    const element = playerHand.childNodes[i];
                    if(element.classList){//有class的才比较--前面有几个空的
                        let bool = element.classList.contains("selectCard");
                        //console.info("是否"+bool);
                        if(bool){
                            removeArray.push(element);
                        }
                    }
                }
                if(removeArray.length>0){
                    for(let i=0; i<removeArray.length; i++){
                        const element = removeArray[i];
                        playerHand.removeChild(element);
                        element.classList.remove('selectCard');
                        element.classList.add('deck');
                        deckArea.appendChild(element);
                    }
                }
            }
        });



        //这里摸牌，相当于的发牌，跑得快只摸一下
        planCardButton.addEventListener('click', function () {
            const newCard = document.createElement('div');
            newCard.classList.add('card');
            newCard.textContent = '新牌';
            //增加选择事件
            newCard.addEventListener('click', function () {
                const isInitialClass = this.classList.contains("card");
                if (isInitialClass) {
                    // 修改为新的类
                    this.classList.remove('card');
                    this.classList.add('selectCard');
                } else {
                    // 恢复为原来的类
                    this.classList.remove('selectCard');
                    this.classList.add('card');
                }
            });
            playerHand.appendChild(newCard);
        });

        // 替换为您的 WebSocket 服务器地址
        const socket = new WebSocket('ws://localhost:8888/game/websocket?token=123');

        // 监听连接打开事件
        socket.addEventListener('open', function (event) {
            console.log('WebSocket connection opened');

            // 发送消息给服务器
            socket.send("{'apiName':'playServiceImpl','body':{'abc':'Hello Server!My Name Is YangLin'}}");
        });

        // 接收来自服务器的消息
        socket.addEventListener('message', function (event) {
            //console.log('Message from server:', event.data);
            let body = JSON.parse(event.data);
            let personCardMap = body.personCardMap;
            let personCardList = personCardMap["0"];
            console.log("第一个人的牌"+personCardList);
            for(let i=0; i<personCardList.length; i++){
                const cardInfo = personCardList[i];
                const newCard = document.createElement('div');
                newCard.classList.add('card');
                newCard.textContent = cardInfo.order;
                //增加选择事件
                newCard.addEventListener('click', function () {
                    const isInitialClass = this.classList.contains("card");
                    if (isInitialClass) {
                        // 修改为新的类
                        this.classList.remove('card');
                        this.classList.add('selectCard');
                    } else {
                        // 恢复为原来的类
                        this.classList.remove('selectCard');
                        this.classList.add('card');
                    }
                });
                newCard.style.position = "absolute";
                let lll = -400+(60*i)+"px";
                newCard.style.left = lll;
                //newCard.style.top = "20px";
                newCard.style.bottom = "-200px";
                playerHand.appendChild(newCard);
            }
        });


        // 处理连接关闭事件
        socket.addEventListener('close', function (event) {
            console.log('WebSocket connection closed');
        });

        // 处理错误事件
        socket.addEventListener('error', function (event) {
            console.error('WebSocket error observed:', event);
        });

    </script>
</body>

</html>